<template>
  <div class="content-comment">
    <van-nav-bar
      title="所有评论"
      left-arrow
      fixed
      @click-left="$emit('input', false)"
    />
    <!-- 占位 -->
    <div style="height:50px"></div>
    <!-- 渲染所有留言 -->
    <div class="lean-box">
      <van-cell-group v-for="obj in leaningMsgData" :key="obj.id">
        <van-cell :value="obj.add_time">
          <div slot="title">
            <img class="" :src="obj.user_info.avatar" alt="" />
            <span class="topicName">{{ obj.user_info.nickname }}</span>
          </div>
        </van-cell>
        <p class="text-content">{{ obj.content }}</p>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { leaningMsg } from "@/api/special";
export default {
  name: "ShowAllComment",
  data() {
    return {
      leaningMsgData: [], //评论列表
    };
  },
  props:{
      id:{
          type:Number
      }
  },
  created(){
      this.leaningMsgHandler()
  },
  methods: {
    //    获取留言列表
    async leaningMsgHandler() {
      const { data } = await leaningMsg({
        valueId: this.id,
        typeId: 1,
        page: 1,
        size: 100,
        showType: 0,
      });
      this.leaningMsgData = data.data.data;
    
    },
  },
};
</script>

<style scoped lang="scss">
.leanCon {
  display: flex;
  justify-content: space-between;
  padding: 20px 30px;
  font-size: 32px;
}

// ==========
.leanCon {
  display: flex;
  justify-content: space-between;
  padding: 20px 30px;
  font-size: 32px;
}
.lean-box {
  img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    vertical-align: middle;
  }
  .topicName {
    padding: 0 15px;
  }
}
.text-content {
  font-size: 24px;
  color: #999;
  padding: 20px 30px;
  line-height: 40px;
}

.content-comment{
    overflow-y: auto;
}

</style>
